<template>
  <div id="card" v-loading="loading" class="card">
    <div class="cardHeader">
      <el-avatar v-if="value.avatar" class="imgCircle">
        <img :src="value.avatar" alt="">
      </el-avatar>
      <!-- <el-avatar v-else class="nameCircle">
        <span>{{ value.realName.substr(-1) }}</span>
      </el-avatar> -->
    </div>
    <div class="cardBody">
      <div class="nameSpan">
        <span>{{ value.realName }}</span>
        <i v-if="value.sex == 'M'" class="el-icon-male" style="color: #3461ff" />
        <i v-else class="el-icon-female" style="color: #ffc0cb" />
      </div>
      <span class="nicknameSpan">{{ value.nickName }}</span>
      <div class="personInfo">
        <el-row>
          <el-col :span="6">账号</el-col>
          <el-col :span="17">
            {{ value.account }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">组织</el-col>
          <el-tooltip class="item" effect="dark" :content="value.orgFullPath"
                      placement="top">
            <el-col :span="17" class="omitSpan">
              {{ value.orgFullPath }}
            </el-col>
          </el-tooltip>
        </el-row>
        <el-row>
          <el-col :span="6">岗位</el-col>
          <el-col :span="17">
            {{ value.positionName }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">邮箱</el-col>
          <el-col :span="17">
            {{ value.email }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">电话</el-col>
          <el-col :span="17">
            {{ value.phone }}
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import adminManageApi from '@/framework/api/authCenter/adminManage/adminManage'

export default {
  name: 'PersonCard',
  components: {},
  props: {
    // 接口对象
    personId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true,
      value: {
        realName: ''
      }
    }
  },
  watch: {
    personId(newVal, oldVal) {
      this.getPersonInfo(newVal)
    }
  },
  created() {
    this.getPersonInfo(this.personId)
    // window.addEventListener("mousedown", this.handleMousedown);
  },
  destroyed() {
    // window.removeEventListener("mousedown", this.handleMousedown);
  },
  methods: {
    // handleMousedown(e) {
    //   const taskModal = document.querySelector("#card");
    //   if (taskModal) {
    //     if (!taskModal.contains(e.target)) {
    //       this.$emit("closeCard");
    //     }
    //   }
    // },
    getPersonInfo(val) {
      adminManageApi.getUserDetail({ userId: val }).then((res) => {
        this.value = res.data
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  //   position: absolute;
  width: 320px;
  height: 520px;
  background: #fff;
  border-radius: 4px;
  //   top: 150px;
  //   left: 200px;
  box-shadow: 5px 5px 10px #cccccc, -5px -5px 10px #cccccc;
  //   z-index: 999999;

  .cardHeader {
    width: 100%;
    height: 136px;
    background-image: url("../../../assets/cardHeaderbg.png");

    .imgCircle {
      width: 90px;
      height: 90px;
      border: 2px solid #ffffff;
      position: relative;
      top: 90px;
      left: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

      span {
        font-size: 30px;
      }
    }

    .nameCircle {
      width: 90px;
      height: 90px;
      background: linear-gradient(180deg, #b8e24b 0%, #129a37 100%);
      border: 2px solid #ffffff;
      position: relative;
      top: 90px;
      left: 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        font-size: 30px;
      }
    }
  }

  .cardBody {
    margin-top: 69px;
    padding: 0 16px;

    .nameSpan {
      margin-bottom: 8px;
      font-size: 22px;
      font-weight: 500;
      color: #131414;
      line-height: 31px;

      span {
        margin-right: 4px;
      }

      i {
        font-size: 16px;
      }
    }

    .nicknameSpan {
      font-size: 14px;
      font-weight: 400;
      color: #606266;
      line-height: 20px;
      margin-bottom: 16px;
    }
  }

  .personInfo {
    padding: 16px 0;

    .omitSpan {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    ::v-deep .el-row {
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 400;
    }
  }
}

::v-deep .el-col-6 {
  margin-right: 12px;
}
::v-deep .el-col-17 {
  color: #131414;
}
</style>
